<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* 全局提示信息 */
        .alert{
            display: none;
            position: fixed;
            top: 55px;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff !important;
            font-size: 12px;
            background: rgba(7, 17, 27, 0.7);
        }

        .head, .footer {
            position: fixed;
            z-index: 2;
            left: 0;
            display: flex;
            width: 100%;
        }

        .head {
            top: 0;
            height: 55px;
            background: #ff0;
        }

        .footer {
            bottom: 0;
            height: 50px;
            line-height: 50px;
            background: #1a1a1a;
        }

        .wrapper {
            position: fixed;
            z-index: 1;
            top: 55px;
            bottom: 50px;
            left: 0;
            width: 100%;
            background: #ebebeb;
            overflow: hidden;
        }

        .content {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .item {
            width: 400px;
            height: 140px;
            background: #ddd;
            border-bottom: 1px solid #fff;
        }

        .content:last-child {
            border-bottom: none;
        }

        .top-tip, .bottom-tip, .alert {
            /*display: none;*/
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: #666;
        }

        .top-tip{
            position: absolute;
            top: -50px;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #555;
        }

        .bottom-tip{
            position: absolute;
            bottom: -50px;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #555;
        }


        /*下拉刷新,上拉加载--旋转进度条*/
        .downwarp-progress,
        .upwarp-progress {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid gray;
            margin-right: 8px;
            border-bottom-color: transparent;
            vertical-align: middle;
        }

        /*旋转动画*/
        .rotate {
            -webkit-animation: mescrollRotate 0.6s linear infinite;
            animation: mescrollRotate 0.6s linear infinite;
        }

        @-webkit-keyframes mescrollRotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes mescrollRotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="head"></div>
<div class="wrapper">
    <div>
        <div class="top-tip">
            <span class="downwarp-progress rotate"></span>
            <span class=" refresh-hook">下拉刷新</span>
        </div>
        <ul class="content">
            <!--<li class="item">
                <h1>1</h1>
            </li>
            <li class="item">
                <h1>2</h1>
            </li>
            <li class="item">
                <h1>3</h1>
            </li>
            <li class="item">
                <h1>4</h1>
            </li>
            <li class="item">
                <h1>5</h1>
            </li>
            <li class="item">
                <h1>6</h1>
            </li>
            <li class="item">
                <h1>7</h1>
            </li>
            <li class="item">
                <h1>8</h1>
            </li>
            <li class="item">
                <h1>9</h1>
            </li>-->
        </ul>
        <div class="bottom-tip">
            <span class="upwarp-progress rotate"></span>
            <span class="loading-hook">释放加载更多</span>
        </div>
    </div>
</div>
<div class="footer"></div>
<!-- alert -->
<div class="alert alert-hook">操作成功</div>
<script src="js/bscroll.js"></script>
<script src="js/jquery-1.7.min.js"></script>
<script>
    var wrapper = $('.wrapper')[0];
    var content = $('.content')[0];
    var topTip = $('.top-tip')[0];
    var topTipText = $('.refresh-hook')[0];
    var downwarpProgress = $('.downwarp-progress')[0];
    var bottomTip = $('.bottom-tip')[0];
    var bottomTipText = $('.loading-hook');
    var alert = $('.alert-hook')[0];

    var scroll = new BScroll(wrapper, {
        click: true,
        probeType: 3
    });

    //加载第一页
    renderData(scroll);
    //初始化BSscroll
    initBScroll();

    //渲染第一页
    function renderData(scroll){
        $.ajax({
            url:'json/data.json',
            success:function(data){
                var html='';
                for(var i=0;i<data.length;i++){
                    html+=`
                        <li class="item">
                            <h1>${data[i].content}</h1>
                        </li>
                    `;
                }
                $(".content").html(html);
                scroll.refresh();
            }
        });
    }
    //监听下拉和上拉事件
    function initBScroll() {
        //下拉刷新
        scroll.on('scroll', function (position) {
            if (position.y > 30) {
                topTipText.innerText = '释放立即刷新';
            }
        });
        //上拉加载更多
        /*
         * @ touchend:滑动结束的状态
         * @ maxScrollY:屏幕最大滚动高度
         */
        scroll.on('touchend', function (position) {
            if (position.y > 30) {
                setTimeout(function () {
                    /*
                     * 这里发送ajax刷新数据
                     * 刷新后,后台只返回第1页的数据,无论用户是否已经上拉加载了更多
                     */
                    renderData(scroll);
                    // 恢复文本值
                    topTipText.innerText = '下拉刷新';
                    // 刷新成功后的提示
                    refreshAlert('刷新成功');
                    // 刷新列表后,重新计算滚动区域高度
                    scroll.refresh();
                }, 1000);
            } else if (position.y < (this.maxScrollY - 30)) {
                //bottomTip.innerText = '加载中...';
                setTimeout(function () {
                    // 向列表添加数据
                    reloadData();
                    // 加载更多后,重新计算滚动区域高度
                    scroll.refresh();
                }, 1000);
            }
        });
    }
    // 加载更多方法
    function reloadData() {
        $.ajax({
            url:'json/data.json',
            success:function(data){
                var template='';
                for(var i=0;i<data.length;i++){
                    template+=`
                        <li class="item">
                            <h1>${data[i].content}</h1>
                        </li>
                    `;
                }
                content.innerHTML = content.innerHTML+ template;
                scroll.refresh();
            }
        });
    }
    // 刷新成功提示方法
    function refreshAlert(text) {
        text = text || '操作成功';
        alert.innerHtml = text;
        alert.style.display = 'block';
        setTimeout(function () {
            alert.style.display = 'none';
        }, 1000);
    }

</script>
</body>
</html>